<template>
    <div>
        <h2>基本信息</h2>
        <el-form style="width: 100%;" :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">

            <el-form-item style="width: 100%;" label-width="120px" label="最晚可预订时间:" prop="scheduledTime">
                <el-select v-model="form.scheduled" placeholder="请选择活动区域">
                    <el-option label="次日" value="次日"></el-option>
                    <el-option label="今日" value="今日"></el-option>
                </el-select>
                <el-time-picker arrow-control v-model="form.Time" format="HH: mm: ss" :picker-options="{
                    selectableRange: '00:00:00 - 6:00:00'
                }
                    " placeholder="任意时间点">
                </el-time-picker>
                <span style="color: gray">&nbsp;超过该时间，客户不能预订当天房间 </span>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 100%;" label-width="120px" label="最多可预订数:" prop="predeterminedNumber">
                        <el-input placeholder="请输入内容" v-model="form.predeterminedNumber">
                            <template slot="append">个</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="0">
                    <span style="color: gray"> &nbsp;单个订单最多可预订房间数，不填则不限</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 100%;" label-width="130px" label="最多可预订天数:" prop="scheduledDays">
                        <el-input placeholder="请输入内容" v-model="form.scheduledDays">
                            <template slot="append">天</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"> <span style="color: gray">订单最多可预订房晚,不填则默认60天 ; 可填写1~60天</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 100%;" label-width="120px" label="预订日期范围:" prop="targeDtateRange">
                        <el-input placeholder="请输入内容" v-model="form.targeDtateRange">
                            <template slot="append">天</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"> <span style="color: gray">订房日期范围；可填写
                        1~85天。例:若今天是9号,填写2天,可订11号前离店的订单</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item style="width: 100%;" label-width="120px" label="预订确定:" prop="reservationNotarize">
                        <el-radio-group v-model="form.reservationNotarize">
                            <el-radio label="不需要">不需要</el-radio>
                            <el-radio label="需要">需要</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item style="width: 100%; " label-width="120px" label="预订须知:" prop="bookingNotice">
                        <el-input type="textarea"
                            placeholder="告知客户预订房间时需要注意的事项，如: 1.入住人姓名需要和实际入住人员的证件姓名保持一致; 2.预订多个房间时，需要填写各房间的入住人姓名;3.按照法律法规，入住时请携带各入住人的身份证件，对于未携带入住人本人身份证件,或者入住人不满18周岁且没有成人陪同时,酒店有权拒绝接待;"
                            v-model="form.bookingNotice" maxlength="300" show-word-limit
                            :autosize="{ minRows: 2, maxRows: 10 }">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 100%;" label-width="120px" label="预定须知确认:" prop="reservationConfirmation">
                        <el-radio-group v-model="form.reservationConfirmation">
                            <el-radio :label="false">关闭</el-radio>
                            <el-radio :label="true">启用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"> <span style="color: gray">启用后，订单提交前，会弹窗告知用户预订须知，需用户手动确认。</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 100%;" label-width="120px" label="预留确认:" prop="reservedInformation">
                        <el-switch v-model="form.reservedInformation" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"> <span style="color: gray">启用后，订单提交前，会弹窗告知用户预订须知，需用户手动确认。</span></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item>
                        <div style="background-color: #fff">
                            <span>信息名称</span>
                            <span>操作</span>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item>
                        <!-- Form -->
                        <el-button type="text" @click="dialogFormVisible = true" v-show="isFlag == 0">添加字段</el-button>
                        <div style="background-color: #fff">
                            {{ form.messageName }}
                            <el-button v-show="form.messageName" style="float: right" type="text"
                                @click="dialogFormVisible = true">编辑</el-button><el-button v-show="form.messageName"
                                style="float: right" type="text" @click="deleteMessageName">删除</el-button>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0"></el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="添加预约信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="信息名称">
                    <el-input v-model="form.messageName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveadd()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { Add } from "@/api/AccommodationSetting";
export default {
    data() {
        return {

            form: {
                id: 0,
                scheduled: '',
                Time: '',
                scheduledTime: '',
                predeterminedNumber: 12,
                scheduledDays: 60,
                targeDtateRange: 85,
                //reservation: '',
                reservationNotarize: '',
                bookingNotice: '',
                reservationConfirmation: false,
                reservedInformation: false,
                messageName: ''
            },
            rules: {
                predeterminedNumber: [
                    { required: true, message: '请输入最多可预订数', trigger: 'blur' },
                ],
                scheduledDays: [
                    { required: true, message: '请输入最多可预订天数', trigger: 'blur' },
                ],
                targeDtateRange: [
                    { required: true, message: '请输入预订日期范围', trigger: 'blur' },
                ],
            },
            dialogFormVisible: false,
            isFlag: 0,
            newMessageName: '',
        }
    },
    methods: {
        deleteMessageName() {
            this.form.messageName = "";
            this.isFlag = 0;
        },
        saveadd() {
            this.dialogFormVisible = false;
            this.isFlag = 1;
            this.newMessageName = this.form.messageName;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.scheduledTime = this.form.scheduled.toString();
                    console.log(this.form.scheduledTime);
                    Add(this.form).then(res => {
                        if (res) {
                            this.$message.success("添加成功");
                            location.reload();
                        } else {
                            this.$message.error("添加失败");
                            return;
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style></style>